import '../../assets/css/recommend.scss'
import React, { useState, useEffect } from 'react';
import { Carousel } from 'antd';
import { bannerApi } from '../../api/home/homeApi'
// import axios from 'axios';

import { hotrecommentApi } from '../../api/home/homeApi'

function Recomment() {

    let [CarouselList,setCarouselList] = useState([])   // 轮播图

    let [commentlist, setcommentlist] = useState([])    // 推荐列表
    // 获取热门歌单
    let getcommentlist = () => {
        hotrecommentApi(8).then((res) => {
            setcommentlist(res.data.playlists)
        })
    }
    useEffect(() => {
        getcommentlist()
    }, [])

    // 获取轮播图
    useEffect(()=>{
        bannerApi().then((res)=>{
            // console.log(res.data.banners[0].imageUrl);
            if (res.data.banners.length > 0){
                setCarouselList(res.data.banners)
                // console.log(CarouselList)
            }
            
        })
    },[])
    return (
        <div className='bgcontainer'>
            {/* <div className='rebg'  style={{backgroundImage: `url(${CarouselList[0].imageUrl})`}}></div> */}
            <div className='recommentcontainer'>
                <Carousel effect="fade" autoplay="true">
                    {
                        // 轮播图
                        CarouselList.map((o) => { return <div key={o.targetId}>
                            <div ><img alt='' src={o.imageUrl} /></div>
                        </div> })
                        
                    }
                </Carousel>
            </div>
            <div className='recommmentbox'>
                <div className='header'>
                    <span>热门推荐</span>
                </div>
                {/* 热门推荐列表 */}
                <div className='commentlist'>
                    {/* http://localhost:3000/top/playlist?limit=8 */}
                    {/* coverImgUrl, name */}
                    {
                        commentlist.map((item) => {
                            return <div key={item.id} className='item'>
                                <div className='imgbox' title={item.name}><img alt='' src={item.coverImgUrl} /></div>
                                <span>{item.name}</span>
                            </div>
                        })
                    }
                </div>
                <div className='header'>
                    <span>新碟上架</span>
                </div>
            </div>
        </div>
    );
}

export default Recomment;